<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/commons.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <p>小米网 | MIUI | 米聊 | 游戏 | 多看阅读 | 云服务 | 小米网移动版 | 问题反馈 | Select Region
</p>
        </div>
    </div>
    <div class="header">
        <div class="wrapper">
               <img class="logo" src="./images/logo.png" alt="">
               <img class="new" src="./images/new.gif" alt="">
               <span class="txt">
                <a href="#">小米手机</a>
                <a href="#">红米</a>
                <a href="#">平板</a>
                <a href="#">电视</a>
                <a href="#">盒子 · 影音</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
               </span>
        </div>
    </div>
    <div class="banner">
        <div class="wrapper">
            <img src="./images/banner.png" alt=""></img>
            <!-- 侧导航 ul -->
            <div class="subnav">
                <ul>
                    <li>
                        <div><a href="#">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>
            
                    </li>
            
                    <li>
                        <div><a href="#">电视</a><a href="#">盒子</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">路由器</a><a href="#">智能硬件</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">移动电源</a><a href="#">插线板</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>
            
                    </li>
            
                    <li>
                        <div><a href="#">耳机</a><a href="#">音箱</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">电池</a><a href="#">存储卡</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">保护套</a><a href="#">后盖</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">贴膜</a><a href="#">其他配件</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

            
                    </li>
            
                    <li>
                        <div><a href="#">米兔</a><a href="#">服装</a></div>
                        <span><img src="./images/right.png" alt=""></span>
            
                    </li>
            
                    <li>
                        <div><a href="#">箱包</a><a href="#">其他周边</a></div>
            
                        <span><img src="./images/right.png" alt=""></span>

                    </li>
            
            
                </ul>
            
            </div>

        </div>
    </div>>
    <div class="box">
        <div class="wrapper">
            <div class="left">
                <div>
                    <p>我是一个空色块</p>
                    <p>一言不合就这么任性</p>
                </div>
                
            </div>
            <img src="./images/pro1.jpg" alt="">
            <img src="./images/pro2.jpg" alt="">
            <img src="./images/pro3.jpg" alt="">

        </div>
    </div>
    <div class="pic">
        <div class="wrapper"">
            <div class="title">
                <h3>智能硬件</h3>
                <h4>查看全部</h4>
            </div>
            <div class="pic-box">
                <img src="./images/girl.jpg" alt="">
            <div class="pic-list"">
                <div class="pic-item">
                    <div class="header">
                        <h4>免邮费</h4>
                    </div>
                    <img src="./images/d1.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>

                </div>
                <div class="pic-item">
                    
                    <img src="./images/d2.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
                <div class="pic-item">
                    <div class="header">
                        <h4>免邮费</h4>
                    </div>
                    <img src="./images/d3.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>

                <div class="pic-item">
                 
                    <img src="./images/d4.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
                <div class="pic-item">
                
                    <img src="./images/d5.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
                <div class="pic-item">
             
                    <img src="./images/d6.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
                <div class="pic-item">
                    <div class="header-red">
                        <h4>免邮费</h4>
                    </div>
                    <img src="./images/d7.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
                <div class="pic-item">
                    <img src="./images/d8.jpg" alt="">
                    <div class="info">
                        <p class="name">小米路由器3</p>
                        <p class="feature">四天线设计，更安全更稳定</p>
                        <p class="price">149元</p>
                    </div>
                </div>
            </div>
            </div>
            
        </div>
    </div>
    <!-- 帮助中心 -->
    <div class="help wrapper">
      <div class="left">
        <dl>
          <div class="help-item">
            <dt>帮助中心</dt>
          </div>
          <dd><a href=" ">账户管理</a ></dd>
          <dd><a href="#">购物指南</a ></dd>
          <dd><a href="#">订单操作</a ></dd>
        </dl>
        <dl>
         <div class="help-item">
          <dt>服务支持</dt>
         </div>
          <dd><a href="#">售后政策</a ></dd>
          <dd><a href="#">自助服务</a ></dd>
          <dd><a href="#">相关下载</a ></dd>
        </dl>
        <dl>
         <div class="help-item">
          <dt>线下门店</dt>
         </div>
          <dd><a href="#">小米之家</a ></dd>
          <dd><a href="#">服务网点</a ></dd>
          <dd><a href="#">零售网点</a ></dd>
        </dl>
        <dl>
        <div class="help-item">
          <dt>关于小米</dt>
        </div>
          <dd><a href="#">了解小米</a ></dd>
          <dd><a href="#">加入小米</a ></dd>
          <dd><a href="#">联系我们</a ></dd>
        </dl>
        <dl>
         <div class="help-item">
          <dt>关注我们</dt>
         </div>
          <dd><a href="#">新浪微博</a ></dd>
          <dd><a href="#">小米部落</a ></dd>
          <dd><a href="#">官网微信</a ></dd>
        </dl>
        <dl>
          <div class="help-item">
           <dt>特色服务</dt>
          </div>
           <dd><a href="#">F码通道</a ></dd>
           <dd><a href="#">小米移动</a ></dd>
           <dd><a href="#">防伪查询</a ></dd>
         </dl>
      </div>
      <div class="phone">
          <p class="haoma1">400-100-5678</p >
          <p class="haoma2">周一至周日 8:00 - 18:00</p >
          <p class="haoma3"> (仅收市花费)</p >
      </div>
     </div>
     <!-- 版权 -->
    <div class="banquan">
        <div class="wrapper">
            <div>
            <img class="orange" src="./images/logo.png" alt=""></img>
        </div>
            <div class="copyright">
                    <p class="other">
                        <a href="#">小米网</a >|
                        <a href="#">米聊</a >|
                        <a href="#">MIUI</a >|
                        <a href="#">多看书城</a >|
                        <a href="#">小米路由</a >|
                        <a href="#">小米后院</a >|
                        <a href="#">小米路由器</a >|      
                        <a href="#">小米淘宝直营点</a > |
                        <a href="#">小米网盟</a >               
                    </p >
                
                <p class="po">@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p >
                <p class="po">违法和不良信息举报电话;185-0130-12381111111,本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p >
                
            </div>
    </div>
    <img class="picc wrapper" src="./images/bottom.png" alt=""></img>
    </div>
        
</body>
</html>